<template>
    <div class="store-dashboard">
        <!-- 左半部分 -->
        <div class="left-panel">
            <!-- 店铺名称 -->
            <div class="store-header">
                <div class="store-name">{{ storeName }}</div>

                <!-- 成交类型切换 -->
                <div class="trade-type-toggle">
                    <el-button
                            v-for="type in tradeTypes"
                            :key="type.key"
                            :type="activeType === type.key ? 'primary' : 'default'"
                            @click="switchType(type.key)"
                            class="trade-btn"
                    >
                        {{ type.label }}
                    </el-button>
                </div>
            </div>

            <!-- KPI 卡片 -->
            <div class="card-grid">
                <div
                        v-for="(item, idx) in currentKpis"
                        :key="idx"
                        class="data-card"
                >
                    <div class="card-title">{{ item.label }}</div>
                    <div class="card-value">{{ item.value }}</div>
                </div>
            </div>
        </div>

        <!-- 右半部分 -->
        <div class="right-panel">
            <TrendLineChart
                    :trend-data="trendData[activeType]"
                    :month="month"
            />
        </div>
    </div>
</template>

<script setup>

    const props = defineProps({
        storeName: {
            type: String,
            default: "未命名店铺"
        },
        kpiData: {
            type: {},
            default: {
                all: [
                    {label: '支付金额', value: '0'},
                    {label: '退款金额', value: '0'},
                    {label: '签收率', value: '90'},
                    {label: '千川消耗', value: '0'},
                    {label: 'ROI', value: '0'},
                    {label: '人工成本', value: '0'},
                    {label: '业务利润', value: '0'},
                    {label: '利润率', value: '0'},
                ],
                self: [
                    {label: '支付金额', value: '0'},
                    {label: '退款金额', value: '0'},
                    {label: '签收率', value: '90'},
                    {label: '千川消耗', value: '0'},
                    {label: 'ROI', value: '0'},
                    {label: '人工成本', value: '0'},
                    {label: '业务利润', value: '0'},
                    {label: '利润率', value: '0'},
                ],
                coop: [
                    {label: '支付金额', value: '0'},
                    {label: '退款金额', value: '0'},
                    {label: '签收率', value: '90'},
                    {label: '千川消耗', value: '0'},
                    {label: 'ROI', value: '0'},
                    {label: '人工成本', value: '0'},
                    {label: '业务利润', value: '0'},
                    {label: '利润率', value: '0'},
                ],
            }
        },
        trendData: {
            type: {},
            default: {
                all: {days: [], pay: [], refund: [], discount: []},
                self: {days: [], pay: [], refund: [], discount: []},
                coop: {days: [], pay: [], refund: [], discount: []}
            }
        }
    })

    import {ref, computed, watch} from 'vue'
    import TrendLineChart from './DouyinProjectAnalysis/TrendLineChart.vue'
    import dayjs from 'dayjs'


    // 3个成交类型按钮
    const tradeTypes = [
        {key: 'all', label: '整体成交'},
        {key: 'self', label: '自营成交'},
        {key: 'coop', label: '合作成交'},
    ]

    const activeType = ref('all')


    // 模拟折线数据（3种）
    // const generateTrendData = () => {
    //     const days = Array.from({length: 31}, (_, i) => i + 1)
    //     const random = () => days.map(() => Math.floor(Math.random() * 30000) + 1000)
    //     return {days, pay: random(), refund: random(), discount: random()}
    // }

    // const trendData = {
    //     all: generateTrendData(),
    //     self: generateTrendData(),
    //     coop: generateTrendData(),
    // }


    const month = ref(dayjs().format('YYYY-MM'))

    // 当前KPI展示
    const currentKpis = computed(() => props.kpiData[activeType.value || 'all'])

    const switchType = (key) => {
        activeType.value = key
    }
</script>

<style scoped>
    .store-dashboard {
        display: flex;
        gap: 24px;
        width: 100%;
        margin-top: 20px;
        flex-wrap: wrap;
        border: 1px solid #dce4ff;
        border-radius: 12px;
        padding: 20px 28px;
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(80, 120, 255, 0.1);
        transition: all 0.3s ease;
    }

    /* 左右分栏 */
    .left-panel {
        flex: 1;
        min-width: 500px;
    }

    .right-panel {
        flex: 1;
        min-width: 500px;
        background: #fff;
        border-radius: 8px;
        box-sizing: border-box;
    }

    /* 店铺头部 */
    .store-header {
        margin-bottom: 16px;
    }

    .store-name {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 12px;
    }

    /* 三个按钮 */
    .trade-type-toggle {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    .trade-btn {
        border-radius: 8px;
        padding: 8px 14px;
        font-weight: bold;
        border-width: 2px;
    }

    /* KPI 卡片区域 */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        height: 300px;
    }

    .data-card {
        background: #f6f8ff;
        border: 1px solid #bcd3ff;
        line-height: 30px;
        border-radius: 8px;
        padding: 30px 14px;
        box-shadow: 0 2px 4px rgba(140, 160, 255, 0.15);
        display: flex;
        flex-direction: column;
        /*justify-content: space-between; !* 使内容自适应 *!*/
    }

    .card-title {
        font-size: 14px;
        color: #555;
        font-weight: bold;
    }

    .card-value {
        font-size: 18px;
        font-weight: bold;
        color: #000;
    }

    /* 📱移动端适配 */
    @media (max-width: 768px) {
        .store-dashboard {
            flex-direction: column;
        }

        .left-panel,
        .right-panel {
            width: 100%;
            min-width: auto;
        }

        .card-grid {
            grid-template-columns: repeat(2, 1fr);
            height: auto;
        }

        .trade-type-toggle {
            justify-content: space-between;

        }
    }
</style>
